
<template>
  <div class="data-collection-page page-wrap">
    <!--        头部-->
    <container></container>
    <!-- 右侧内容区域 -->
    <div class="container-panel">
      <div class="tree-container">
        <side-menu></side-menu>
      </div>
      <!-- 左侧树形菜单 -->
      <!-- <div class="tree-container">
        <el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick"></el-tree>
      </div>-->
      <!-- 右侧内容区域 -->
      <div class="content-right-content border-box">
        <!-- 面板内容 -->
        <router-view></router-view>
      </div>
    </div>
    <!--    底部-->
    <bottom-tip></bottom-tip>
  </div>
</template>

<script>
import Container from "@/components/Container";
import BottomTip from "@/components/BottomTip";
import SideMenu from "@/components/sideMenu/index.vue";

export default {
  components: {
    Container,
    BottomTip,
    SideMenu
  },
  data() {
    return {
      data: [
        {
          label: "资料树维护",
          to: "dataTreeMaintain"
        },
        {
          label: "项目资料清理",
          to: "projectClean"
        },
        {
          label: "问题汇总",
          to: "problemsCollect"
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data, data.to);
      this.$router.push(`/projectManagementPage/${data.to}`);
    }
  }
};
</script>

<style lang="less" scoped>
.tree-container {
  height: 100%;
}
.el-tree {
  width: 200px;
  height: 100%;
  background: #455f85;
  font-size: 14px;
  line-height: 20px;
  overflow-y: auto;
  &/deep/.el-tree-node__content {
    height: 44px;
    line-height: 20px;
    font-family: PingFangSC-Regular;
    background-color: #455f85;
    color: #fff;
  }
  &/deep/.el-tree-node__content:hover {
    background: #2e4668;
  }
  &/deep/.el-tree-node:focus > .el-tree-node__content {
    background: #58739a;
    color: #eecc13;
  }
  &/deep/.el-tree-node__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>